<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 元素弹性伸缩应对+flex-shrink使用</title>
    <link rel="stylesheet" type="text/css" media="screen" href="./css/main.css">
</head>

<body>
    <div>
        当flex-wrap: nowrap;不折行时，容器宽度有剩余/不够分，弹性元素们该怎么“弹性”地伸缩应对？ <br>
        这里针对上面两种场景，引入两个属性(需应用在弹性元素上) <br>
        <ol>
            <li>flex-shrink：缩小比例（容器宽度 < 元素总宽度时如何收缩） </li> <li>flex-grow：放大比例（容器宽度>元素总宽度时如何伸展）</li>
        </ol>
        <p>
            flex-shrink: 缩小比例<br>
            来看下以下场景，弹性容器#container宽度是200px，一共有三个弹性元素，宽度分别是50px、100px、120px。<br>在不折行的情况下，此时容器宽度是明显不够分配的。
            <pre>
                #containter {
                    display: flex;
                    flex-wrap: nowrap;
                }
        </pre>
            实际上,<strong>默认为1，也就是当不够分配时，元素都将等比例缩小，占满整个宽度</strong>，示例如下面的样例：<br>
            注意：flex-shrink: 1，<strong>并非严格等比缩小，它还会考虑弹性元素本身的大小</strong>。<br>
            元素缩小计算方法<br>
            如下例中： child1的宽度是50px，child2的宽度是100px，child3的宽度是120px，<br>
            外容器需要提供的宽度为270px，实际容器宽度为200px，<br>
            那么，实际各个元素的宽度：<br>
            child1：50 * 200/270 = 37.03 px； <br>
            child2：100 * 200/270 = 74.08 px； <br>
            child3：120 * 200/270 = 88.89 px； <br>
        </p>
    </div>
    <div>
        <div id="containter">
            <div>child1</div>
            <div>child2</div>
            <div>child3</div>
        </div>
    </div>

</body>
<style>
    #containter {
        display: flex;
        flex-wrap: nowrap;
        background-color: aqua;
        width: 200px;
        height: 200px;
    }

    #containter div {
        border: 0.3px solid #000;
    }

    #containter div:first-child {
        width: 50px;
        height: 50px;
        background-color: chocolate;
    }

    #containter div:nth-child(2) {
        width: 100px;
        height: 50px;
        background-color: chocolate;
    }

    #containter div:last-child {
        width: 120px;
        height: 50px;
        background-color: chocolate;
    }
</style>

</html>